<template>
	<div class="date">
		<span class="margin-right-10">{{ dateTime }}</span>
		<span>{{ week }}</span>
	</div>
</template>

<script setup name="DvDate">
import { date } from '@u/date';
const dateTime = ref(''),
	week = ref('');

const timer = setInterval(timerFn, 1000);
function timerFn() {
	dateTime.value = date(new Date(), 'yyyy年MM月dd日 hh:mm:ss');
	week.value = `星期${['日', '一', '二', '三', '四', '五', '六'][new Date().getDay()]} `;
}
timerFn();

// 页面失活后定时器会变慢，时间会不准确，所以切换回来后重启定时
window.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'visible') {
		if (timer) clearInterval(timer);
		timerFn();
	}
});

onBeforeUnmount(() => {
	if (timer) clearInterval(timer); // 在Vue实例销毁前，清除定时器
});
</script>

<style lang="scss" scoped>
.date {
	display: inline-block;
	padding: 18px;
	font-size: 18px;
	color: #1091f1;
}
</style>
